<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线打印</title>
    <link type="image/x-icon" rel="shortcut icon" href="assets/images/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/Less/cloud_printer.css">
</head>

<body>
    <!-- 头部导航 -->
    <div>
        <nav class="navbar navbar-default c_navbar navbar-static-top" role="navigation">
            <div class="container c_cot">
                <div class="navbar-header c_header">
                    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#navbar-menu">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="assets/images/brand.png" alt="" class="img-responsive center-block brand_img hidden-xs">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="cative nav_menu_li"><a href="http://120.79.148.35:3010/#/home" class="nav_menu_font">首页</a></li>
                        <li class="cative nav_menu_li"><a href="http://120.79.148.35:3010/modelbase" class="nav_menu_font">模型库</a></li>
                        <li class="cative nav_menu_li"><a href="https://3d.biowinedu.com/authenticate" class="nav_menu_font">在线建模</a></li>
                        <li class="cative nav_menu_li"><a href="http://120.79.148.35:3010/printing" class="nav_menu_font">在线打印</a></li>
                        <li class="cative nav_menu_li"><a href="http://120.79.148.35:3010/shequ" class="nav_menu_font">社区</a></li>
                        <li class="cative nav_menu_li"><a href="http://120.79.148.35:3010/about" class="nav_menu_font">关于</a></li>
                        <li class="cative nav_menu_li btn_login login_img">
                            <a href="http://120.79.148.35:3010/#/login">
                                <img src="assets/images/login.png" class="img-circle">
                                <span>user_test</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <main id="container">
        <!-- 模型预览与相关信息显示 -->
        <div class="container-fluid" id="prev">
            <div class="row">
                <div class="col-md-7 prev_left clearfix">
                    <div id="canvas3d"></div>
                    <div class="file-box">
                        <form id="uploadForm">
                            <input type="file" name="file" class="file" id="fileField" />
                        </form>
                    </div>
                </div>
                <div class="col-md-5 prev_right">
                    <ul>
                        <li>
                            <img src="assets/images/cloud.png" alt="" class="img-responsive">
                            <span>打印机类型:</span>&nbsp;
                            <span>Printors i3</span>
                        </li>
                        <li>
                            <img src="assets/images/locate.png" alt="" class="img-responsive">
                            <span>打印机地点:</span>&nbsp;
                            <span>昆明理工大学呈贡校区综合性体育运动馆</span>
                        </li>
                        <li>
                            <img src="assets/images/file.png" alt="" class="img-responsive file_png">
                            <span>文件名:</span>&nbsp;
                            <span class="fileName">xxx.stl</span>
                        </li>
                        <li>
                            <img src="assets/images/resize-full-alt.png" alt="" class="img-responsive resize_png">
                            <span>尺寸大小:</span>&nbsp;
                            <span class="x_size">0mm x </span>
                            <span class="y_size">0mm x </span>
                            <span class="z_size">0mm</span>
                        </li>
                        <li>
                            <img src="assets/images/pla.png" alt="" class="img-responsive pla_png">
                            <span>耗材:</span>&nbsp;
                            <div class="select">
                                <select>
                                    <option>PLA</option>
                                </select>
                            </div>
                            <span class="price"> *0.8元/g</span>
                        </li>
                        <li>
                            <img src="assets/images/size.png" alt="" class="img-responsive size_png">
                            <span>模型比例:</span>&nbsp;
                            <div class="pro_bar">
                                <div class="progress">
                                    <div class="progress-bar"></div>
                                </div>
                                <a class="pro_control" href="javascript:;"></a>
                                <div id="progress_value">100%</div>
                            </div>
                        </li>
                        <li>
                            <img src="assets/images/type.png" alt="" class="img-responsive type_png">
                            <span>打印模式:</span>&nbsp;
                            <div class="pri_type">
                                <div class="btn-group " role="group" aria-label="...">
                                    <button type="button" class="btn btn-default selected">快速</button>
                                    <button type="button" class="btn btn-default">标准</button>
                                    <button type="button" class="btn btn-default">品质</button>
                                    <button type="button" class="btn btn-default">自定义</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img src="assets/images/number.png" alt="" class="img-responsive number_png">
                            <span>数量:</span>&nbsp;
                            <div class="btn-group number" role="group" aria-label="...">
                                <span class="down">-</span><span class="num">1</span><span class="add">+</span>
                            </div>
                        </li>
                        <li>
                            <img src="assets/images/time.png" alt="" class="img-responsive time_png">
                            <span>预估时间:</span>&nbsp;
                            <span class="time">2 h 30 min</span>
                        </li>
                        <li>
                            <img src="assets/images/price.png" alt="" class="img-responsive price_png">
                            <span>总价:</span>&nbsp;
                            <span class="money">￥0</span>
                        </li>
                        <li class="text-center operation">
                            <button class="btn btn-success btn-sm op_btn op_btn1 uploadFile">上传文件</button>
                            <button class="btn btn-success btn-sm op_btn op_btn2 joinQueue">加入队列</button>
                            <button class="btn btn-success btn-sm op_btn op_btn3 printing">立即打印</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 购物车及底部信息 -->
        <div class="container-fluid" id="shopCar-wrapper">
            <div class="panel panel-default">
                <div class="panel-heading">购物车</div>
                <div class="panel-body shopping">
                    <table class="table text-center tb_queue">
                        <tr class="main">
                            <td>订单文件名</td>
                            <td>订单编号</td>
                            <td>模型信息</td>
                            <td>模型数量</td>
                            <td>金额</td>
                            <td>管理</td>
                        </tr>
                    </table>
                    <div class="text-right">
                        <span class="sumMoney">￥0</span>
                        <a class="sumAll btn btn-success" href="#">合计</a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部信息部分 -->
    <div class="clearfix">
        <div class="container-fluid " id="footer">
            <div class="row">
                <div class="col-lg-2 col-lg-offset-5">
                    <h3 class="h_word">联系我们</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 text-center">
                    <img src="assets/images/wechat.png" alt="" class="img-responsive center-block f_img">
                    <img src="assets/images/qq.png" alt="" class="img-responsive center-block f_img">
                    <img src="assets/images/weibo.png" alt="" class="img-responsive center-block f_img">
                    <img src="assets/images/facebook.png" alt="" class="img-responsive center-block f_img">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3">
                    <h3>地址：广东省广州大学城广东工业大学E110</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3">
                    <h3>@2017-2018 Printors.Allright reserved.</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- 类似蒙版打印文件界面 -->
    <div class="container-fluid upload-wrapper" style="display:none">
        <div id="upload-wrapper">
            <div class="img-wrapper"></div>
            <div class="upload">
                <a class="btn-upload text-center" href="javascript:;">上传文件</a>
                <div class="text-wrapper text-center">*支持stl、obj文件*</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/libs/threejs/three.js"></script>
    <script src="assets/js/libs/threejs/loaders/STLLoader.js"></script>
    <script src="assets/js/libs/threejs/OrbitControls.js"></script>
    <script src="./assets/js/libs/require.js" data-main="./index.js"></script>
</body>

</html>